<template>
  <div class="waybill-management">
    <div class="top-card box">
      <div class="card">
        <el-card class="box-card">
          <el-row>
            <el-col :span="6">订单编号: {{ head.orderId }}</el-col>
            <el-col :span="6">运单编号: {{ head.id }}</el-col>
            <el-col :span="6">下单时间: {{ head.order.createTime }}</el-col>
            <el-col :span="6">订单状态: {{ statusmap.get(head.order.status) }}</el-col>
            <!-- <template v-slot="{row}">{{statusmap.get(row.status)}}</template> -->
          </el-row>
          <el-row>
            <el-col :span="6">预计到达日期: {{ head.order.estimatedArrivalTime }}</el-col>
          </el-row>
        </el-card>
      </div>

      <div class="collapse">
        <el-collapse v-model="open">
          <el-collapse-item title="基本信息">
            <el-timeline>
              <el-timeline-item
                color="blue"
                icon="el-icon-more"
              >发货方

                <el-row>
                  <el-col :span="6">发货方姓名:{{ head.order.senderName }}</el-col>
                  <el-col :span="6">发货方电话:{{ head.order.senderPhone }}</el-col>
                </el-row>
                <el-row>
                  <el-col :span="6">发货方地址:{{ head.order.senderCity.name }}{{ head.order.senderProvince.name }}{{ head.order.senderCounty.name }}</el-col>
                  <el-col :span="6">详细地址:{{ head.order.senderAddress }}</el-col>
                </el-row>
              </el-timeline-item>
              <el-timeline-item
                icon="el-icon-more"
              >收货方
                <el-row>
                  <el-col :span="6">收获方姓名:{{ head.order.receiverName }}</el-col>
                  <el-col :span="6">收获方电话:{{ head.order.receiverPhone }}</el-col>
                </el-row>
                <el-row>
                  <el-col :span="6">收获方地址:{{ head.order.receiverProvince.name }}{{ head.order.receiverCity.name }}{{ head.order.receiverCounty.name }}</el-col>
                  <el-col :span="6">详细地址:{{ head.order.receiverAddress }}</el-col>
                </el-row>
              </el-timeline-item>
            </el-timeline>
          </el-collapse-item>
        </el-collapse>
      </div>

      <div class="collapse">
        <el-collapse v-model="open" accordion>
          <el-collapse-item title="运输信息">
            <el-steps :space="400" :active="3" finish-status="success">
              <el-step :title="begin" />
              <el-step :title="middle" />
              <el-step :title="end" />
            </el-steps>
          </el-collapse-item>
        </el-collapse>
      </div>

      <div class="collapse">
        <el-collapse v-model="open">
          <el-collapse-item title="货品信息">
            <el-table :data="goods" style="width: 100%">
              <el-table-column type="index" label="序号" />
              <el-table-column prop="name" label="货品名称" width="180" />
              <el-table-column prop="goodsType.name" label="货品类型" width="180" />
              <el-table-column prop="totalWeight" label="重量(千克)" />
              <el-table-column prop="totalVolume" label="体积(立方)" />
            </el-table>
          </el-collapse-item>
        </el-collapse>
      </div>
    </div>
  </div>
</template>

<script>
import { getwaybillDetail } from '@/api/waybillmanage'
export default {
  data() {
    return {

      activities: [
        {
          content: '发货方',
          // timestamp: '2018-04-12 20:46',
          size: 'large',
          type: 'primary',
          icon: 'el-icon-more'
        },
        {
          content: '收货方',
          // timestamp: '2018-04-03 20:46',
          color: '#0bbd87',
          icon: 'el-icon-more'
        }
      ],
      head: [], // 1和2列表
      // 订单状态列表
      statusmap: new Map([
        [22000, '已关闭'],
        [23000, '待取件'],
        [23001, '已取件'],
        [23002, '网点自寄'],
        [23003, '网点入库'],
        [23004, '待装车'],
        [23005, '运输中'],
        [23006, '网点出库'],
        [23007, '待派送'],
        [23008, '派送中'],
        [23009, '已签收'],
        [23010, '拒收'],
        [230011, '已取消']
      ]),
      // 3运输列表
      begin: '皇姑区营业部',
      middle: '',
      end: '',
      goods: [] // 4底部表格

    }
  },
  created() {
    this.getwaybillDetail()
  },
  methods: {
    async getwaybillDetail() {
      const id = this.$route.params.id
      console.log(id)
      const res = await getwaybillDetail(id)
      console.log(res.data)
      this.goods = res.data.order.orderCargoDTOS
      // console.log(this.goods);
      this.head = res.data
      // console.log(this.head);
      // this.begin = res.data.startAgencyName
      // console.log(this.begin);
      this.middle = res.data.taskTransports[0].startAgency.name
      this.end = res.data.taskTransports[0].endAgency.name
      // console.log(res.data.transportLine);
    }

  }
}
</script>

<style lang="scss" scoped>
.waybill-management {
  padding: 0 20px;
  margin-top: 20px;
}
.top-card {
  // height: 142px;
  margin-bottom: 15px;
  .box-card{

    .el-row {
    // margin-bottom: 20px;
    margin-top: 20px;
  }
  ::v-deep .el-cor{
      margin-right: 20px;
    }
  }

  .el-row {
    margin-top: 5px;
    margin-bottom: 20px;
  }

  .collapse {
    margin-bottom: 15px;
    // font-size: 25px;
    // height: 300px;
    ::v-deep .el-collapse-item__header {
      background-color: rgb(184, 186, 189);
      font-size: 18px;
      padding-left: 10px;
      box-shadow: 1px 3px 2px 1px rgb(150, 153, 153);
    }
    .el-timeline{
      margin-top: 20px;
      font-size: 15px;
    }
    .el-steps{
      margin-top: 20px;
      margin-left: 60px;
      // text-align: center;
    }
  }
  .card {
    margin-bottom: 15px;
    // height: 200px;
  }
}
.box {
  box-sizing: border-box;
  padding: 20px;
  // background-color: pink;
  border-radius: 10px;
  min-height: 50px;
}
</style>
